<!DOCTYPE html>
<html>
<head>
	<title>双人坦克对战</title>
	<style type="text/css">
		#p1{
			position: absolute;
			left: 350px;
			background-color: white ;
		}
		#p2{
			position: absolute;
			left: 900px;
			background-color: white ;
		}
		canvas{
			position: absolute;
			top: 50px;
			left: 300px;
			border: 3px solid black ;
			background-image: url(画布背景.png);
		}
		body{
			background-image: url(backimg-1.jpg);
			background-repeat: no-repeat;
		}
		#restart{
			position: absolute;
			left: 1250px;
			top: 100px;
			width: 150px;
			height: 70px;
			font-size: 30px;
			background-color: red ;
		}
		#tip{
			width: 350px;
			position: absolute;
			left: 1150px;
			top: 190px;
			background-color: white ;
		}

		
	</style>
	<script type="text/javascript">
		var p1direction = 'up' ;
		var p2direction = 'down' ;
		var p2tanksrci = 'enemytank-down.png' ;
		var p1tanksrc = 'yourtank-up.png' ;
		var p2tanksrc = 'enemytank-down.png' ;
		var yx = 380 ;
		var yy = 530 ;
		var ex = 380 ;
		var ey = 100 ;
		var tw = 10 ;
		var bw = 10 ;
		var p1up = false ;
		var p1down = false ;
		var p1left = false ;
		var p1right = false ;
		var p2up = false ;
		var p2down = false ;
		var p2left = false ;
		var p2right = false ;
		var p1firecode = 0 ;
		var p2firecode = 0 ;
		var xp1 = 0 ;
		var yp1 = 0 ;
		var spx1 = 0 ;
		var spy1 = 0 ;
		var p1bullet = new Array() ;
		p1bullet[0] = new Array() ;
		var p2bullet = new Array() ;
		p2bullet[0] = new Array() ;
		var xp2 = 0 ;
		var yp2 = 0 ;
		var spx2 = 0 ;
		var spy2 = 0 ;
		var scorep1 = 0 ;
		var scorep2 = 0 ;
		function gamestart(){
			
			P1tank() ;

			P2tank() ;

			movetankp1() ;

			movetankp2() ;


		}
		//绘制玩家初始坦克
		function P1tank(){
			drawtankp1() ;
		}
		function P2tank(){
			drawtankp2() ;
		}
		//控制玩家一坦克的方向
		function controldirectionp1(){
			if(p1left == true){
				if(p1up == false && p1down == false){
				p1tanksrc = 'yourtank-left.png' ;
				yx+=-tw ;
				yy+=0 ;
				p1direction = 'left' ;
				
			}
			} 
 			if(p1up == true){
 				if(p1left == false && p1right ==false){
				p1tanksrc = 'yourtank-up.png' ;
				yx+=0 ;
				yy+=-tw ;
				p1direction = 'up' ;
			}
			}
			if(p1right == true){
				if(p1up == false && p1down == false){
				p1tanksrc = 'yourtank-right.png' ;
				yx+=tw ;
				yy+=0 ;
				}
				p1direction = 'right' ;
			}
			if(p1down == true){
				if(p1left == false && p1right ==false){
				p1tanksrc = 'yourtank-down.png' ;
				yx+=0 ;
				yy+=tw ;
				p1direction = 'down' ;
			}
			}
		}
		//控制玩家二坦克的移动
		function controldirectionp2(){
			if(p2left == true){
				if(p2up == false && p2down == false){
				p2tanksrc = 'enemytank-left.png' ;
				ex+=-tw ;
				ey+=0 ;
				p2direction = 'left' ;
			}
			} 
 			if(p2up == true){
 				if(p2left == false && p2right ==false){
				p2tanksrc = 'enemytank-up.png' ;
				ex+=0 ;
				ey+=-tw ;
				p2direction = 'up' ;
			}
			}
			if(p2right == true){
				if(p2up == false && p2down == false){
				p2tanksrc = 'enemytank-right.png' ;
				ex+=tw ;
				ey+=0 ;
				p2direction = 'right' ;
			}
			}
			if(p2down == true){
				if(p2left == false && p2right ==false){
				p2tanksrc = 'enemytank-down.png' ;
				ex+=0 ;
				ey+=tw ;
				p2direction = 'down' ;
			}
			}
			}
		//刷新画面
		function gamerefresh(){
			var a = document.getElementById('tank') ;
			a.width = a.width ;
		}
		//玩家一坦克的移动
		function movetankp1(){

			controldirectionp1() ;
			
			drawtankp1() ;


		}
		//玩家二坦克的移动
		function movetankp2(){

			controldirectionp2() ;
			
			drawtankp2() ;

		}
		//绘制玩家一坦克
		function drawtankp1() {
			var c = document.getElementById('tank') ;
			var ctx = c.getContext('2d') ;
			var p1tank = new Image() ;
			p1tank.src = p1tanksrc ;
			p1tank.onload = function(){
			ctx.drawImage(p1tank,yx,yy,60,60) ;
		}
		}
		//绘制玩家二坦克
		function drawtankp2() {
			var c = document.getElementById('tank') ;
			var ctx = c.getContext('2d') ;
			var p2tank = new Image() ;
			p2tank.src = p2tanksrc ;
			p2tank.onload = function(){
			ctx.drawImage(p2tank,ex,ey,60,60) ;
		}
		}
		function drawtank(x,y,tanksrc) {
			var c = document.getElementById('tank') ;
			var ctx = c.getContext('2d') ;
			var tank = new Image() ;
			tank.src = tanksrc ;
			p2tank.onload = function(){
			ctx.drawImage(tank,x,y,60,60) ;
		}
		}

		//监控键盘
		document.onkeydown = function(e){
			var drivetankaudio = document.getElementById('drivetank') ;
			var firemusic = document.getElementById('fire') ;
			
			if(e.keyCode == 87){
				p1up = true ;
				drivetankaudio.play() ;
			}
			if(e.keyCode == 65){
				p1left = true ;
				drivetankaudio.play() ;
			}
			if(e.keyCode == 83){
				p1down = true ;
				drivetankaudio.play() ;
			}
			if(e.keyCode == 68){
				p1right = true ;
				drivetankaudio.play() ;
			}

			if(e.keyCode == 37){
				p2left = true ;
				drivetankaudio.play() ;
			}
			if(e.keyCode == 38){
				p2up = true ;
				drivetankaudio.play() ;
			}
			if(e.keyCode == 39){
				p2right = true ;
				drivetankaudio.play() ;
			}
			if(e.keyCode == 40){
				p2down = true ;
				drivetankaudio.play() ;
			}
			if(e.keyCode == 32){
				p1firecode = e.keyCode ;
				firemusic.play() ;
			}
			if(e.keyCode == 13){
				p2firecode = e.keyCode ;
				firemusic.play() ;
			}

		}
		document.onkeyup = function(e){
			var drivetankaudio = document.getElementById('drivetank') ;
			var firemusic = document.getElementById('fire') ;
			if(e.keyCode == 87){
				p1up = false ;
				drivetankaudio.pause();
			}
			if(e.keyCode == 65){
				p1left = false ;
				drivetankaudio.pause();
			}
			if(e.keyCode == 83){
				p1down = false ;
				drivetankaudio.pause();
			}
			if(e.keyCode == 68){
				p1right = false ;
				drivetankaudio.pause();
			}

			if(e.keyCode == 37){
				p2left = false ;
				drivetankaudio.pause();
			}
			if(e.keyCode == 38){
				p2up = false ;
				drivetankaudio.pause();
			}
			if(e.keyCode == 39){
				p2right = false ;
				drivetankaudio.pause();
			}
			if(e.keyCode == 40){
				p2down = false ;
				drivetankaudio.pause();
			}
			if (e.keyCode == 32 || e.keyCode == 13) {
				
			}
		}
	function p1fire(){
			if(p1firecode == 32) {

				bulletp1(yx,yy,p1direction) ;

				p1drawbullet() ;

				p1firecode = 0 ;
			}
				p1bulletimpact() ;
		}
		function p2fire(){
			if(p2firecode == 13) {
		
				bulletp2(ex,ey,p2direction) ;
				
				p2drawbullet() ;

				p2firecode = 0 ;
			}
				p2bulletimpact() ;
		}	
		function bulletp1(x,y){
			var tlx = x ;
			var tly = y ;
			if(p1direction== 'left'){
				xp1 = -20 ;
				yp1 = 25 ;
				spx1 = -10 ;
				spy1 = 0 ;
			}
			else if(p1direction == 'right'){
				xp1 = 70 ;
				yp1 = 25 ;
				spx1 = 10 ;
				spy1 = 0 ;

			}
			else if(p1direction == 'up'){
				xp1= 25 ;
				yp1 = -20 ;
				spx1 = 0 ;
				spy1 = -10 ;
			}
			else if(p1direction == 'down'){
				xp1 = 25 ;
				yp1 = 70 ;
				spx1 = 0 ;
				spy1 = 10 ;
			}
			p1bullet[0] = new Array() ;
			p1bullet[0]['x'] = tlx + xp1 ; 
			p1bullet[0]['y'] = tly + yp1 ;
				
		}
		function bulletp2(x,y){
			var tlx = x ;
			var tly = y ;
			if(p2direction== 'left'){
				xp2 = -20 ;
				yp2 = 25 ;
				spx2 = -10 ;
				spy2 = 0 ;
			}
			else if(p2direction == 'right'){
				xp2 = 70 ;
				yp2 = 25 ;
				spx2 = 10 ;
				spy2 = 0 ;

			}
			else if(p2direction == 'up'){
				xp2= 25 ;
				yp2 = -20 ;
				spx2 = 0 ;
				spy2 = -10 ;
			}
			else if(p2direction == 'down'){
				xp2 = 25 ;
				yp2 = 70 ;
				spx2 = 0 ;
				spy2 = 10 ;
			}
			p2bullet[0] = new Array() ;
			p2bullet[0]['x'] = tlx + xp2 ; 
			p2bullet[0]['y'] = tly + yp2 ;		
		}
		function p1drawbullet(){
				var c = document.getElementById('tank') ;
				var ctx = c.getContext('2d') ;
				
				ctx.clearRect(p1bullet[0]['x'],p1bullet[0]['y'],bw,bw) ;
				p1bullet[0]['x'] += spx1 ;
				p1bullet[0]['y'] += spy1 ;
				ctx.fillRect(p1bullet[0]['x'],p1bullet[0]['y'],bw,bw) ;
		}	
		function p2drawbullet(){
				var c = document.getElementById('tank') ;
				var ctx = c.getContext('2d') ;
				
				ctx.clearRect(p2bullet[0]['x'],p2bullet[0]['y'],bw,bw) ;
				p2bullet[0]['x'] += spx2 ;
				p2bullet[0]['y'] += spy2 ;
				ctx.fillRect(p2bullet[0]['x'],p2bullet[0]['y'],bw,bw) ;
		}
		function tankimpact(){
				if(ex <=5){
					ex = 0 ;
				}
				if(ex>=740){
					ex = 740 ;
				}
				if(ey<=5){
					ey = 0 ;
				}
				if(ey>=540){
					ey = 540 ;
				}
				if(yx <=5){
					yx = 0 ;
				}
				if(yx>=740){
					yx = 740 ;
				}
				if(yy<=5){
					yy = 0 ;
				}
				if(yy>=540){
					yy = 540 ;
				}
				if((Math.abs(yx-ex)<70)&&(Math.abs(yy-ey)<70)){
					window.location.reload() ;
					alert('坦克已撞毁,行车不规范，亲人两行泪！') ;
					
				}
			}
		function p1bulletimpact(){
			 	a = p1bullet[0]['x'] - ( ex + 30 ) ;
				b = p1bullet[0]['y'] - ( ey + 30 ) ;
				
				if(Math.abs(a)<=30 && Math.abs(b)<=30){
					var lastbox1 = p1bullet.shift() ;
					var a = document.getElementById('p1score') ;
					scorep1+=10 ;
					a.innerHTML = scorep1 ;
				}
			}		
		function p2bulletimpact(){
				c = p2bullet[0]['x'] - ( yx + 30 ) ;
				d = p2bullet[0]['y'] - ( yy + 30 ) ;
				if(Math.abs(c)<=30 && Math.abs(d)<=30){
					var lastbox2 = p2bullet.shift() ;
					var a = document.getElementById('p2score') ;
					scorep2+=10 ;
					a.innerHTML = scorep2 ;
				}
			}
		function gamerestart(){
			if(scorep1>=100 || scorep2>= 100){
				window.location.reload() ;
				alert('游戏结束！') ;
				if(scorep1>scorep2){
					alert('让我们恭喜一号玩家赢得了比赛！ OHHHHHHHHHHH!') ;
				}
				else if(scorep1<scorep2){
					alert('让我们恭喜二号玩家赢得了比赛！ OHHHHHHHHHHH!') ;
				}
			}
		}
		function startgame(){
			window.location.reload();
			alert('游戏开始！尽情射击吧！') ;	
		}

	setInterval('movetankp1()',40) ;
	setInterval('movetankp2()',40) ;
	setInterval('gamerefresh()',40) ;
	setInterval('p1fire()',100) ;
	setInterval('p2fire()',100) ;
	setInterval('p1drawbullet()',40) ;
	setInterval('p2drawbullet()',40) ;
	setInterval('tankimpact()',100) ;
	setInterval('gamerestart()',40) ;
	</script>
</head>
<body onload="gamestart()">
<div>
	<div id="tip">
		<h3>游戏说明</h3>
		<p>1.按键操作</p>
		<p>玩家一：W:上 A:左 S:下 D:右   空格:发射炮弹</p>
		<p>玩家二：↑:上 ←:左 ↓:下 →:右   右Enter:发射炮弹</p>
		<p>2.玩法说明</p>
		<p>击中对方坦克+10分,任意一方达到100分获得胜利！</p>
		<p>坦克碰撞后，坦克会被摧毁，所以请安全驾驶！</p>
	</div>
	<div id="p1">玩家一的分数：<span id="p1score">0</span></div>
	<div id="p2">玩家二的分数：<span id="p2score">0</span></div>
	<canvas id="tank" width="800px" height="600px"></canvas>
	<div><button id="restart" onclick="startgame()">开始游戏</button></div>
	<div>
		<audio id="drivetank">
			<source src="drivetank.mp3" type="audio/mp3">
		</audio>
		<audio id="fire">
			<source src="fire.mp4" type="audio/mp4">
		</audio>
	</div>
</div>
</body>
</html>